import React, {useEffect, useState} from 'react'
import {Divider, Result} from 'antd-mobile'
import {CheckCircleOutline} from 'antd-mobile-icons'
import http from 'libs/http'
import styles from './success.module.css'
import store from './store'

const PaymentSuccess = () => {
  const [orderInfo, setOrderInfo] = useState(null)

  useEffect(() => {
    const fetchOrderInfo = async () => {
      const res = await http.get(`/api/app/order/?order_id=${store.orderid}`)
      setOrderInfo({
        ...res,
      })
    }

    fetchOrderInfo()
  }, [])

  return (
    <div className={styles.container}>
      <Result
        icon={<CheckCircleOutline color="#00b578"/>}
        status="success"
        title="支付成功"
        description={`您已成功${orderInfo && orderInfo.paymentType === 'offline' ? '提交线下支付信息' : '完成支付'}`}
      />

      <div className={styles.orderInfo}>
        <div className={styles.orderHeader}>
          <h3>订单信息</h3>
        </div>

        <div className={styles.infoItem}>
          <span className={styles.label}>订单编号：</span>
          <span className={styles.value}>{orderInfo && orderInfo.order_no}</span>
        </div>

        <div className={styles.infoItem}>
          <span className={styles.label}>学生姓名：</span>
          <span className={styles.value}>{orderInfo && orderInfo.student_name}</span>
        </div>

        <div className={styles.infoItem}>
          <span className={styles.label}>上课类型：</span>
          <span className={styles.value}>
            {orderInfo && orderInfo.class_type === 'in_school' ? '校内上课' : '校外上课'}
          </span>
        </div>

        {orderInfo && orderInfo.class_type === 'in_school' && (
          <div className={styles.infoItem}>
            <span className={styles.label}>班级信息：</span>
            <span className={styles.value}>
              {orderInfo.grade === 'grade_1' ? '高一' :
                orderInfo.grade === 'grade_2' ? '高二' : '高三'}
              {orderInfo.class_number && orderInfo.class_number.replace('class_', '')}班
            </span>
          </div>
        )}

        <div className={styles.infoItem}>
          <span className={styles.label}>支付方式：</span>
          <span className={styles.value}>
            {orderInfo && orderInfo.payment_type === 'wechat' ? '微信支付' : '线下汇款'}
          </span>
        </div>

        <div className={styles.infoItem}>
          <span className={styles.label}>支付金额：</span>
          <span className={styles.value}>¥ {orderInfo && orderInfo.total_amount}</span>
        </div>

        {orderInfo && orderInfo.payment_type === 'offline' && (
          <div className={styles.infoItem}>
            <span className={styles.label}>付款码：</span>
            <span className={styles.value}>{orderInfo && orderInfo.payment_code}</span>
          </div>
        )}

        <div className={styles.infoItem}>
          <span className={styles.label}>创建时间：</span>
          <span className={styles.value}>{orderInfo && orderInfo.created_at}</span>
        </div>
      </div>

      <Divider/>

      <div className={styles.courseList}>
        <h3>课程信息</h3>
        {orderInfo && orderInfo.courses && orderInfo.courses.map((course, index) => (
          <div key={index} className={styles.courseItem}>
            <div className={styles.courseName}>{course.course_name}</div>
            <div className={styles.coursePrice}>¥ {course.price}</div>
          </div>
        ))}
      </div>
    </div>
  )
}

export default PaymentSuccess